<template>
	<view class="page">
		<u-navbar title="采购已付" :autoBack="true" left-icon-color="white" :titleStyle="{color:'white'}" :bgColor="color"
			:placeholder="true">
		</u-navbar>
		<view class="countCard">
			<view class="title"><text style="26rpx;display: block;">采购已付总额</text>
				<view @click="refresh"><u-icon name="reload" color="#fff" size="22"></u-icon></view>
			</view>
			<view class="count"><text style="font-size: 50rpx;">{{total.dataCount}}</text><text
					style="margin-left: 10px;font-size: 22rpx;">元</text></view>
			<view class="button" @click="dataDialog=true"><text class="chooseTime">选择时间</text></view>
		</view>
		<view class="centerTitle">
			<text style="width: 4rpx; height: 30rpx;display: block;background-color: #2BA3A4;"></text><text
				style="margin-left: 10rpx;">所选仓库实时数据</text>
		</view>
		<view class="table">
			<view class="col"><text class="list" style="color:#2BA3A4;background-color: #DCF0F0;">仓库</text> <text
					class="list" style="color:#2BA3A4;background-color: #DCF0F0;">数据</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">宁乡仓</text> <text
					class="list">{{purchaseCountObject[1].totalPrice}}万</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">云南仓</text> <text
					class="list">{{purchaseCountObject[5].totalPrice}}万</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">重庆仓</text> <text
					class="list">{{purchaseCountObject[10].totalPrice}}万</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">贵州仓</text> <text
					class="list">{{purchaseCountObject[11].totalPrice}}万</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">广东仓</text> <text
					class="list">{{purchaseCountObject[2].totalPrice}}万</text></view>
			<view class="col"><text class="list" style="border-right: 1rpx solid #DCF0F0">河南仓</text> <text
					class="list">{{purchaseCountObject[7].totalPrice}}万</text></view>
		</view>
		<u-popup :show="dataDialog" mode="top">
			<view style="height: 400rpx;">
				<view class="timeConner">
					<view @click="chooseStart">{{startTime}}</view>
					<view>至</view>
					<view @click="chooseEnd">{{endTime}}</view>
				</view>
				<view class="bottom">
					<u-button size="small" style="width: 140rpx;" @click="dataDialog=false">取消</u-button>
					<u-button size="small" type="primary" style="width: 140rpx;"
						@click="chooseDate">确认</u-button>
				</view>
			</view>


		</u-popup>
		<view>

			<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm"></u-datetime-picker>
			<u-datetime-picker :show="show2" v-model="value2" mode="date" @confirm="confirm2"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				purchaseCountObject: {},
				total: "",
				dataDialog: false,
				startTime: '开始日期',
				endTime: '结束日期',
				value1: Number(new Date()),
				value2: Number(new Date()),
				show: false,
				show2: false,
			}
		},
		onLoad() {
			this.getPurchaseData()
			this.getPurchaseAlready()
		},
		methods: {
			chooseDate() {
				this.getPurchaseData()
				this.getPurchaseAlready()
			},
			getPurchaseData() {
				let purchaseCountObject = {}
				let params = {}
				if (this.startTime != '开始日期') {
					params = {
						startTime: this.startTime,
						endTime: this.endTime
					}
				} else {
					params = {
						startTime: '',
						endTime: ''
					}
				}
				uni.$u.http.get('/dataDetail/selectWareHouseProcurePaymentTotal',{params:params}).then(res => {
					res.procureWarehouseTotalList.forEach(item => {
						item.totalPrice = (item.totalPrice / 10000).toFixed(2)
						purchaseCountObject[item.warehouseId] = item

					})
					this.purchaseCountObject = purchaseCountObject
				})
			},
			getPurchaseAlready() {
				this.dataDialog = false
				let params = {}
				if (this.startTime != '开始日期') {
					params = {
						startTime: this.startTime,
						endTime: this.endTime
					}
				} else {
					params = {
						startTime: '',
						endTime: ''
					}
				}
				uni.$u.http.get('dataDetail/selectFinanceData', {
					params: params
				}).then(res => {
					res.forEach(item => {
						if (item.dataCount == 0.02 || item.dataCount == 0.01) {
							item.dataCount = "0"
						}
						this.total = res[1]
					})
				})
			},
			chooseStart() {
				this.show = true
			},
			chooseEnd() {
				this.show2 = true
			},
			confirm(e) {
				this.startTime = dayjs(e.value).format('YYYY-MM-DD');
				this.show = false
			},
			confirm2(e) {
				this.endTime = dayjs(e.value).format('YYYY-MM-DD')
				this.show2 = false
			},
			refresh() {
				this.startTime = "开始日期"
				this.endTime = '结束日期'
				this.getPurchaseAlready()
				this.getPurchaseData()
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.countCard {
		width: 90%;
		height: 310rpx;
		margin: 40rpx;
		background-color: #2BA3A4;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding-left: 50rpx;
		padding-right: 80rpx;
		box-sizing: border-box;
		color: #fff;
	}

	.chooseTime {
		display: block;
		width: 220rpx;
		border-radius: 50rpx;
		height: 60rpx;
		color: #2BA3A4;
		background-color: #fff;
		text-align: center;
		line-height: 60rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.centerTitle {
		font-size: 26rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;
	}

	.table {
		width: 90%;
		margin: 10rpx 40rpx 0 40rpx;
		height: 600rpx;
	}

	.col {
		display: flex;
		align-items: center;
		height: 80rpx;
		border-bottom: 1rpx solid #DCF0F0
	}

	.list {
		width: 50%;
		height: 80rpx;
		background-color: #fff;
		display: block;
		line-height: 80rpx;
		text-align: center;
	}

	.timeConner {
		display: flex;
		background: #13989A;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 150rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #D0EAEB;
	}

	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;

	}
</style>